<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.11.3.js"></script>
    <style>
        ul,li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box {
            width: 500px;
            height: 500px;
            border:1px solid blue;
        }
        .box .tab li {
            width: 33%;
            float: left;
            background-color: #c0c0c0;
        }
        .box .tab li:first-child{
            background-color: white;
        }
        .box .content ul{
            display: none;
        }
        .box .content ul:first-child {
            display: block;
        }
    </style>
</head>
<body>
<div class="box">
    <ul class="tab">
        <li>第一个标签</li>
        <li>第二个标签</li>
        <li>第三个标签</li>
    </ul>
    <div class="content">
        <ul>
            aaa
        </ul>
        <ul>
            bbb
        </ul>
        <ul>
            ccc
        </ul>
    </div>
</div>

<script>
    $(".tab li").mouseover(function(){
        $(this).parent().find('li').css('backgroundColor','#c0c0c0').eq($(".tab li").index(this)).css('backgroundColor','white')
        $(".content ul").hide().eq($(".tab li").index(this)).show();

    })

//    $(".tab li").mouseover(function(){
////        console.log($(".tab li").index(this));
//        var index = $(".tab li").index(this);
//        $(this).parent().find('li').css('backgroundColor','#c0c0c0')
//        $(this).css('backgroundColor','white');
//        $(".content ul").hide();
//        $(".content ul").eq(index).show();
//
////        console.log($(this));
//    })
</script>
</body>
</html>